﻿@using System.Web.Script.Serialization
@{
    Layout = "~/Views/Shared/_contentLayout.cshtml";
}

<script type="text/javascript">
    var pageNumber = 1;

    function deleteStory(storyId) {
        apprise('Are you sure want to delete this story?', { 'confirm': true }, function (response) {
            if (response) {
                $.getJSON('../Story/Delete?storyId=' + storyId, function (data) {
                    if (data.Success)
                        apprise('Successfully deleted record.');
                    else
                        apprise(data.Error);
                });
            }
        });
    }

    function deleteCharacter(characterId) {
        apprise('Are you sure want to delete this character?', { 'confirm': true }, function (response) {
            if (response) {
                $.getJSON('../Character/Delete?characterId=' + characterId, function (data) {
                    if (data.Success)
                        apprise('Successfully deleted record.');
                    else
                        apprise(data.Error);
                });
            }
        });
    }

    function nextPage() {
        pageNumber++;
        setPage(pageNumber);
    }

    function prevPage() {
        pageNumber--;
        setPage(pageNumber);
    }

    function setPage(pageNumber) {
        var pageCount = 10;

        var repository = new Repository();
        repository.count('IModifiable', function (results) {
            var maxPage = Math.ceil(results / pageCount);
            $('#page').text(pageNumber + ' of ' + maxPage);

            if (maxPage > pageNumber) $('#next_link').show();
            else $('#next_link').hide();

            if (pageNumber > 1) $('#prev_link').show();
            else $('#prev_link').hide();
        });

        repository.get({ Target: 'IModifiable', Sort: [{ Column: 'CreateDate', Order: 'desc' }, { Column: 'Id', Order: 'desc'}], PageNumber: pageNumber, PageCount: pageCount }, function (results) {
            $('.contentPanel').remove();
            $('#content br').remove();
            $(results).each(function (index, element) {
                console.log(element);
                if (element.Type == 'Story')
                    displayStory(element.Object);
                else if (element.Type == 'Character')
                    displayCharacter(element.Object);
            });
            $('#content').append($('<br style="clear: both"/>'));
        });
    }

    $(function () {
        setPage(pageNumber);
    });

    function displayStory(story) {
        var newDiv = $('<div class="contentPanel">' + story.Title + '</div>');
        newDiv.append($('<a href="../Story/Edit?storyId=' + story.Id + '">Edit</a>'));
        newDiv.append($('<a href="javascript: deleteStory(' + story.Id + ')">Delete</a>'));
        $('#content').append(newDiv);
    }

    function displayCharacter(character) {
        var newDiv = $('<div class="contentPanel">' + character.FullName + '</div>');
        newDiv.append($('<a href="../Character/Edit?characterId=' + character.Id + '">Edit</a>'));
        newDiv.append($('<a href="javascript: deleteCharacter(' + character.Id + ')">Delete</a>'));
        $('#content').append(newDiv);
    }
</script>

<div style="text-align: center; width: 800px;">
    <a id="prev_link" href="javascript: prevPage()" style="float: left; display: none;">Prev</a>
    <a id="next_link" href="javascript: nextPage()" style="float: right; display: none;">Next</a>
    <span id="page">&nbsp;</span>
</div>